<template>
  <el-form-item label="" prop="browseRule">
    <el-checkbox-group v-model="formData.browseRule">
      <template v-for="dict in ruleList" :key="dict.value">
        <el-checkbox :value="dict.value">
          {{ dict.label }}
        </el-checkbox>
      </template>
    </el-checkbox-group>
    <div
      v-if="formData.browseRule?.includes(1)"
      class="p-10px w-100% border-rd-5px mb-20px border-1px bg-[var(--el-color-primary-light-9)]"
    >
      <el-tag
        effect="dark"
        class="mr-15px"
        size="large"
        closable
        v-for="(item, index) in formData.browseMember"
        :key="item.id"
        @close="formData.browseMember?.splice(index, 1)"
        >{{ item.name }}</el-tag
      >
      <el-button @click="addMemberLevel()">添加会员等级</el-button>
    </div>
    <div
      v-if="formData.browseRule?.includes(2)"
      class="p-10px w-100% border-rd-5px mb-20px border-1px bg-[var(--el-color-primary-light-9)]"
    >
      <el-tag
        effect="dark"
        class="mr-15px"
        size="large"
        closable
        v-for="(item, index) in formData.browsePaidmember"
        :key="item.id"
        @close="formData.browsePaidmember?.splice(index, 1)"
        >{{ item.name }}</el-tag
      >
      <el-button @click="addPaidMemberLevel()">添加付费会员等级</el-button>
    </div>
    <div
      v-if="formData.browseRule?.includes(3)"
      class="p-10px w-100% border-rd-5px mb-20px border-1px bg-[var(--el-color-primary-light-9)]"
    >
      <el-tag
        effect="dark"
        class="mr-15px"
        size="large"
        closable
        v-for="(item, index) in formData.browseTags"
        :key="item.id"
        @close="formData.browseTags?.splice(index, 1)"
        >{{ item.name }}</el-tag
      >
      <el-button @click="addMemberTag()">添加标签组</el-button>
    </div>
  </el-form-item>
  <!-- 会员等级选择 -->
  <MemberLevelSelect ref="MemberLevelSelectRef" @success="setMemberLevel" />
  <!-- 付费会员等级选择 -->
  <PaidMemberLevelSelect ref="PaidMemberLevelSelectRef" @success="setPaidMemberLevel" />
  <!-- 会员标签组选择 -->
  <MemberTagSelect ref="MemberTagSelectRef" @success="setMemberTag" />
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import * as RuleApi from '@/api/mall/product/rule'
import { oneOfType } from 'vue-types'

const props = defineProps({
  modelValue: oneOfType<number | number[]>([Number, Array<Number>]),
  isDetail: propTypes.bool.def(false) // 是否作为详情组件
})
// 表单数据
const formData = ref<RuleApi.BrowseRule>({
  browseRuleId: undefined,
  browseRule: [], //浏览权限
  browseMember: [], //浏览权限 会员
  browsePaidmember: [], //浏览权限 付费会员
  browseTags: [] //浏览权限 标签组
})
watch(
  () => props.modelValue,
  async () => {
    formData.value.browseRuleId = props.modelValue
    console.log(formData.value.browseRuleId)

    formData.value.browseRule = [1, 2, 3]
  },
  { immediate: true }
)

// 规则项
const ruleList = ref([
  {
    label: '指定会员等级',
    value: 1
  },
  {
    label: '指定付费会员',
    value: 2
  },
  {
    label: '指定标签组',
    value: 3
  }
])
/** 会员等级管理*/
const MemberLevelSelectRef = ref()
const addMemberLevel = () => {
  MemberLevelSelectRef.value.open()
}
const setMemberLevel = (levelList) => {
  formData.value.browseMember = levelList
}
/** 付费会员等级管理*/
const PaidMemberLevelSelectRef = ref()
// 门店选中
const addPaidMemberLevel = () => {
  PaidMemberLevelSelectRef.value.open()
}
const setPaidMemberLevel = (levelList) => {
  formData.value.browsePaidmember = levelList
}
/** 会员标签管理*/
const MemberTagSelectRef = ref()
// 门店选中
const addMemberTag = () => {
  MemberTagSelectRef.value.open()
}
const setMemberTag = (tagList) => {
  formData.value.browseTags = tagList
}
// 更新规则
const emits = defineEmits(['setRule'])
const emitRule = () => {
  emits('setRule', formData.value)
}
defineExpose({ emitRule })
</script>
